<template>
  <!-- 柱状图 -->
  <div id="MeterEchar">
    <div ref="chart01" class="chart01"></div>

  </div>
</template>

<script>
export default {
  name: "MeterEchar",
  components: {},
  props: {
    Tcolor: {
      type: String,
      default: "green",
    },
    MmeNum: {
      type: Number,
      default: 30,
    },
  },
  data() {
    return {
      value: 60,
    };
  },
  computed: {
    CurrentColor() {
      switch (this.Tcolor) {
        case "green":
          return "#71c084";
        case "red":
          return "#ec6e71";
        case "yellow":
          return "#e2d05a";
      }
    },
  },
  watch: {
    MmeNum(){
      this.drawMeterEchar();
    }
  },
  created() {},
  mounted() {
    this.drawMeterEchar();
  },

  methods: {
    drawMeterEchar() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        series: [
          {
            type: 'gauge',
            center: ["50%", "50%"], // 图形坐标位置 左, 右
            radius: "90%", //控制图表大小
            startAngle: "210",
            endAngle: "-30",
            axisLine: {
              // roundCap: true,
              lineStyle: {
                width: 10,
                color: [
                  [0.3, '#71c084'],
                  [0.7, '#f5de5a'],
                  [1, '#ff7372']
                ]
              }
            },
            // progress: { //展示当前进度
            //    show: true, //是否展示进度条
            //    overlap: false, //是否重叠
            //    roundCap: true, // 是否圆顶
            //    clip: false, // 是否裁掉超出部分
            //    width: 16,
            //    itemStyle: {
            //      // 设置圆形
            //        color: '#71c084', // 设置进度条初期式样
            //     }
            //  },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: "8",
              width: "6",
              offsetCenter: [0,'-65%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              show: false,
              distance: 4,
              length: 4,
              lineStyle: {
                color: 'rgba(255,255,255,.4)',
                width: 1
              }
            },
            splitLine: {
              show: false,
              distance: -30,
              length: 30,
              lineStyle: {
                color: '#fff',
                width: 4
              }
            },
            axisLabel: {
              show: false,
              color: 'auto',
              distance: 40,
              fontSize: 20
            },
            // detail: {
            //   valueAnimation: true,
            //   formatter: '{value} km/h',
            //   color: 'auto'
            // },
            data: [
              {
                value: this.MmeNum,
                title: {
                  show: false
                },
                detail: {
                  offsetCenter: [0, '0%'],
                  fontSize: "30",
                  color: 'auto',
                  fontWeight: "500",
                  // show: false
                }
              }
            ]
          }
        ]
      };

      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#MeterEchar {
  width: 100%;
  height: 100%;
  position: relative;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>